<!DOCTYPE html>
<html>
<head> 
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/jsp/head.jsp"%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-table.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-combobox.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-datetimepicker.css">
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-text.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-button.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-combobox.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-radio.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-checkbox.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-datetimepicker.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-menu.js"></script>
<script src="${pageContext.request.contextPath}/static/js/data/user.js"></script>
<script src="${pageContext.request.contextPath}/static/js/menu.js"></script>
<script type="text/javascript">
$(function () {
    $('#simpleTable').BootstrapTable({
		columns: [
			{display : '登录名', name: 'loginName'},
			{display : '姓名', name: 'userName'},
			{display : '电话', name: 'userPhone'},
			{display : '移动电话', name: 'userMPhome'},
			{display : '电子邮箱', name: 'userEmail'},
		],
		data: user,
		usePager: false
	});
    
    $('#pageTable').BootstrapTable({
		columns: [
			{display : '登录名', name: 'loginName'},
			{display : '姓名', name: 'userName'},
			{display : '电话', name: 'userPhone'},
			{display : '移动电话', name: 'userMPhome'},
			{display : '电子邮箱', name: 'userEmail'},
		],
		data: user,
		usePager: true
	});
    
    $('#rownumTable').BootstrapTable({
		columns: [
			{display : '登录名', name: 'loginName'},
			{display : '姓名', name: 'userName'},
			{display : '电话', name: 'userPhone'},
			{display : '移动电话', name: 'userMPhome'},
			{display : '电子邮箱', name: 'userEmail'},
		],
		data: user,
		rownum: true,
		usePager: true
	});    
    
    $('#actionTable').BootstrapTable({
		columns: [
			{display : '登录名', name: 'loginName'},
			{display : '姓名', name: 'userName'},
			{display : '电话', name: 'userPhone'},
			{display : '移动电话', name: 'userMPhome'},
			{display : '电子邮箱', name: 'userEmail'},
		],
		actions: [
		    {
		    	text: '新增',
		    	//text: '<span class="glyphicon glyphicon-plus">新增</span>',
		    	position: 'top',
		    	cls: 'btn-sm btn-success',
		    	execute: function(){
		    	    alert(1);
		    	}
		    },		    
		    {
		    	text: '修改',
		    	//text: '<span class="glyphicon glyphicon-pencil">修改</span>',
		    	position: 'right',
		    	execute: function(data,row){
		    		alert(JSON.stringify(data));
		    	}
		    },
		],
		data: user,
		usePager: false
	});    
    
    $('#eventTable').BootstrapTable({
		columns: [
			{display : '登录名', name: 'loginName'},
			{display : '姓名', name: 'userName'},
			{display : '电话', name: 'userPhone'},
			{display : '移动电话', name: 'userMPhome'},
			{display : '电子邮箱', name: 'userEmail'},
		],
		data: user,
		usePager: false,
		onSelectRow: function(data,row){
			alert(JSON.stringify(data));
		},
		onSelectCell: function(data,cell){
			alert(JSON.stringify(data));
		}
	});

    $('#checkboxTable').BootstrapTable({
		columns: [
			{display : '登录名', name: 'loginName'},
			{display : '姓名', name: 'userName'},
			{display : '电话', name: 'userPhone'},
			{display : '移动电话', name: 'userMPhome'},
			{display : '电子邮箱', name: 'userEmail'},
		],
		data: user,
		pageSize: 5,
		usePager: true,
    	checkbox: true,
    	onCheckClick: function(data,row){
    		alert(JSON.stringify(data));
    	},
	});
    
    $('#editTable').BootstrapTable({
		columns: [
			{display : '登录名', name: 'loginName',readonly: true},
			{display : '姓名', name: 'userName'},
			{display : '电话', name: 'userPhone'},
			{display : '移动电话', name: 'userMPhome'},
			{display : '电子邮箱', name: 'userEmail'},
			{
				display : '职务', 
				name: 'pose',
				width: '10%',
				editor: {
	    	    	type: 'combobox',
	    	    	options: {
	    	    		name: 'pose',
	    	    		data: [
	    	    		       {value: 10000, text: "业务员"},
	    	    		       {value: 20000, text: "经理"},
	    	    		       {value: 30000, text: "总裁"},
	    	    		    ]
	    	    	}					
				}
            },
			{
				display : '生日', 
				name: 'birthDay',
				width: '18%',
				editor: {
	    	    	type: 'datetime',
	    	    	options: {
	    	            language: 'zh-CN',
	    	            autoclose: true,
	    	            todayBtn: true,
	    	            pickerPosition: "bottom-left",
	    	            minuteStep: 5,
	    	            format: 'yyyy-mm-dd',
	    	            minView: 'month'
	    	    	}					
				}
            },
		],
		actions: [				    
		    {
		    	text: '获取数据',
		    	position: 'top',
		    	cls: 'btn-sm btn-success',
		    	execute: function(){
		    		var data = $(this).BootstrapTable('getData');
		    		alert(JSON.stringify(data));
		    	}
		    }
		],
		data: mydata,
		readonly: false,
		usePager: false
	});
    
    $('#filterTable').BootstrapTable({
		columns: [
			{display : '登录名', name: 'loginName'},
			{display : '姓名', name: 'userName'},
			{display : '电话', name: 'userPhone'},
			{display : '移动电话', name: 'userMPhome'},
			{display : '电子邮箱', name: 'userEmail'},
		],
		data: user,
		filter: true,
		usePager: true
	});
    
    $("#summaryTable").BootstrapTable({
		columns: [
			{display : '登录名', name: 'loginName', readonly: true},
			{display : '姓名', name: 'userName',summaryType: 'count'},
			{display : '电话', name: 'userPhone', type: 'number', summaryType: 'sum'},
			{display : '移动电话', name: 'userMPhome', type: 'number', summaryType: 'avg'},
			{display : '电子邮箱', name: 'userEmail'},
		],
		data: mydata,
		isSummary: true,
		usePager: false
	});    
    
});

</script>
</head>

<body>      
	<div class="container">
	    <nav id="menu"></nav>	
		<div class="panel panel-default">
	        <div class="panel-heading">简单表格</div>
			<div class="panel-body">
		        <div id="simpleTable"></div>
		     </div>
		     <div class="panel-footer">
		                                         简单表格的简略使用说明：                                   </br>
				    $('#simpleTable').BootstrapTable({                </br>
						columns: [                                    </br>
							{display : '登录名', name: 'loginName'},    </br>
							{display : '姓名', name: 'userName'},       </br>
							{display : '电话', name: 'userPhone'},      </br>
							{display : '移动电话', name: 'userMPhome'},   </br>
							{display : '电子邮箱', name: 'userEmail'},   </br>
						],                                            </br>
						data: user,                                   </br>
						usePager: false                               </br>
					});                                               </br>
					其中columns为构建表格的列元素，是一个json数组对象                                                    </br>
					data为构建表格的数据，是一个json数组对象，本例为自定义的 user对象                 </br>
					usePager表示是否分页，true为分页，false为不分页                                                   </br>
		     </div>
	    </div>
		<div class="panel panel-default">
	        <div class="panel-heading">分页表格</div>
			<div class="panel-body">
		        <div id="pageTable"></div>
		     </div>
		     <div class="panel-footer">
		                                         分页表格的简略使用说明：                                   </br>
				    $('#pageTable').BootstrapTable({                </br>
						columns: [                                    </br>
							{display : '登录名', name: 'loginName'},    </br>
							{display : '姓名', name: 'userName'},       </br>
							{display : '电话', name: 'userPhone'},      </br>
							{display : '移动电话', name: 'userMPhome'},   </br>
							{display : '电子邮箱', name: 'userEmail'},   </br>
						],                                            </br>
						data: user,                                   </br>
						usePager: true                               </br>
					});                                               </br>
					与简单表格类似，只是usePager设定为true，控件自动展现分页工具条                     </br>
		     </div>		     
	    </div>
	    
		<div class="panel panel-default">
	        <div class="panel-heading">带行号的表格</div>
			<div class="panel-body">
		        <div id="rownumTable"></div>
		     </div>
		     <div class="panel-footer">
		                                         分页表格的简略使用说明：                                   </br>
				    $('#rownumTable').BootstrapTable({                </br>
						columns: [                                    </br>
							{display : '登录名', name: 'loginName'},    </br>
							{display : '姓名', name: 'userName'},       </br>
							{display : '电话', name: 'userPhone'},      </br>
							{display : '移动电话', name: 'userMPhome'},   </br>
							{display : '电子邮箱', name: 'userEmail'},   </br>
						],                                            </br>
						data: user,                                   </br>
						rownum: true,                                 </br>
						usePager: true                               </br>
					});                                               </br>
					与简单表格类似，只是rownum设定为true，控件自动展现行号                    </br>
		     </div>		     
	    </div>	    
	    
		<div class="panel panel-default">
	        <div class="panel-heading">带操作的表格</div>
			<div class="panel-body">		        
		        <div id="actionTable"></div>
		     </div>
		     <div class="panel-footer">
		                          带操作表格的简略使用说明 ：                                                                                                                                                                                                                           </br>
			    $('#actionTable').BootstrapTable({                                            </br>
					columns: [                                                                </br>
						{display : '登录名', name: 'loginName'},                                </br>
						{display : '姓名', name: 'userName'},                                   </br>
						{display : '电话', name: 'userPhone'},                                  </br>
						{display : '移动电话', name: 'userMPhome'},                               </br>
						{display : '电子邮箱', name: 'userEmail'},                                </br>
					],                                                                         </br>
					actions: [                                                                 </br>
					    {                                                                      </br>
					    	text: '&ltbutton class="btn btn-success btn-sm"&gt新增&lt/button&gt',        </br>
					    	position: 'top',                                                    </br>
					    	execute: function(){                                                </br>
					    	    alert(1);                                                       </br>                                                       
					    	}                                                                   </br>
					    },                                                                      </br>	    
					    {                                                                       </br>
					    	text: '&ltbutton class="btn btn-success btn-xs"&gt修改&lt/button&gt',        </br>
					    	position: 'right',                                                  </br>
					    	execute: function(data,row){                                        </br>
					    	    alert(JSON.stringify(data));                                   </br>
					    	}                                                                   </br>
					    },                                                                       </br>
					],                                                                           </br>
					data: user,                                                                  </br>
					usePager: false                                                               </br>
				});                                                                               </br>
				比起简单表格增加了actions属性。actions属性为json数组，其定义如下:                                 </br>
				text: 操作的展示形态，最简单的可直接定义为'修改'这样的字符串，本例定义为了一个button按钮                                                              </br>
				position: 操作所在位置，有top和right两种，right适用于行操作，top适用于非行操作                                                                       </br>
				execute:点击操作执行函数，top操作不带参数，right操作带行数据和行dom元素两个参数                                                                            </br>
		     </div>		     
	    </div>	     

		<div class="panel panel-default">
	        <div class="panel-heading">行触发和单元格触发</div>
			<div class="panel-body">
		        <div id="eventTable"></div>
		     </div>
		     <div class="panel-footer">
		                           触发事件表格的简略说明：                                                                                                                                                                                                                                  </br>
			    $('#eventTable').BootstrapTable({                                                </br>
					columns: [                                                                   </br>
						{display : '登录名', name: 'loginName'},                                    </br>
						{display : '姓名', name: 'userName'},                                       </br>
						{display : '电话', name: 'userPhone'},                                     </br>
						{display : '移动电话', name: 'userMPhome'},                                   </br>
						{display : '电子邮箱', name: 'userEmail'},                                     </br>
					],                                                                             </br>
					data: user,                                                                     </br>
					usePager: false,                                                              </br>
					onSelectRow: function(data,row){                                               </br>
						alert(JSON.stringify(data));                                                </br>
					},                                                                              </br>
					onSelectCell: function(data,cell){                                               </br>
						alert(JSON.stringify(data));                                                </br>
					}                                                                                </br>
				});	                                                                                  </br>
				比起简单表格增加了onSelectRow事件和onSelectCell事件                                                                                                                                                      </br>
				onSelectRow：行触发事件，当点击表格的任意行时触发，带行数据和行dom元素两个参数                                                                                                   </br>
				onSelectCell：单元格触发事件，当点击表格的任意单元格时触发，带单元格数据和单元格dom元素两个参数                                                           	</br>     
		     </div>
	    </div>

		<div class="panel panel-default">
	        <div class="panel-heading">带checkbox的表格</div>
			<div class="panel-body">
		        <div id="checkboxTable"></div>
		     </div>
		     <div class="panel-footer">
		                            带checkbox的表格简略说明：                                                                                                                                   </br>
			    $('#checkboxTable').BootstrapTable({                      </br>
					columns: [                                            </br>
						{display : '登录名', name: 'loginName'},             </br>
						{display : '姓名', name: 'userName'},                </br>
						{display : '电话', name: 'userPhone'},               </br>
						{display : '移动电话', name: 'userMPhome'},             </br>
						{display : '电子邮箱', name: 'userEmail'},             </br>
					],                                                     </br>
					data: user,                                              </br>
					usePager: false,                                        </br>
			    	checkbox: true,                                           </br>
			    	onCheckClick: function(data,row){                                 </br>
			    		alert(JSON.stringify(data));                           </br>
			    	},                                                         </br>
				});                                                            </br>
				比起简单表格增加了checkbox属性和onCheckClick事件                                                                                       </br>
				checkbox属性为true时控件自动添加checkbox复选框                                                                                          </br>
				onCheckClick为任意checkbox选择和反选时触发事件，带行数据和行对象两个参数                                  </br>
	        </div>    	     
	    </div>

		<div class="panel panel-default">
	        <div class="panel-heading">可编辑表格</div>
			<div class="panel-body">
		        <div id="editTable"></div>
		     </div>
		     <div class="panel-footer">
		     可编辑表格简略说明：                                                                                                                                                                                                             </br>
			    $('#editTable').BootstrapTable({                                </br>
					columns: [                                                     </br>
						{display : '登录名', name: 'loginName',readonly: true},   </br>
						{display : '姓名', name: 'userName'},                      </br>
						{display : '电话', name: 'userPhone'},                     </br>
						{display : '移动电话', name: 'userMPhome'},                 </br>
						{display : '电子邮箱', name: 'userEmail'},                  </br>
						{                                                         </br>
							display : '职务',                                      </br>
							name: 'pose',                                         </br>
							width: '10%',                                          </br>
							editor: {                                            </br>
				    	    	type: 'combobox',                                </br>
				    	    	options: {                                        </br>
				    	    		name: 'pose',                                 </br>
				    	    		data: [                                       </br>
				    	    		       {value: 10000, text: "业务员"},           </br>
				    	    		       {value: 20000, text: "经理"},             </br>
				    	    		       {value: 30000, text: "总裁"},             </br>
				    	    		    ]                                         </br>
				    	    	}	                                                </br>				
							}                                                       </br>
			            },                                                          </br>
						{                                                          </br>
							display : '生日',                                        </br>
							name: 'birthDay',                                       </br>
							width: '18%',                                          </br>
							editor: {                                               </br>
				    	    	type: 'datetime',                                      </br>
				    	    	options: {                                            </br>
				    	            language: 'zh-CN',                              </br>
				    	            autoclose: true,                                  </br>
				    	            todayBtn: true,                                  </br>
				    	            pickerPosition: "bottom-left",                      </br>
				    	            minuteStep: 5,                                      </br>
				    	            format: 'yyyy-mm-dd',                               </br>
				    	            minView: 'month'                                     </br>
				    	    	}	                                                   </br>				
							}                                                           </br>
			            },                                                            </br>
					],                                                                   </br>
					actions: [				                                                </br>
					    {                                                                      </br>
					    	text: '&ltbutton class= "btn btn-success btn-sm"&gt获取数据&lt/button&gt',      </br>
					    	position: 'top',                                                 </br>
					    	execute: function(){                                                </br>
					    		var data = $(this).BootstrapTable('getData');                    </br>
					    		alert(JSON.stringify(data));                                 </br>
					    	}                                                                </br>
					    }                                                                       </br>
					],                                                                         </br>
					data: mydata,                                                               </br>
					readonly: false,                                                             </br>
					usePager: false                                                                </br>
				});	                                                                             </br>
				比起简单表格，可编辑表格定义了readonly属性为false，使得每列变为可输入的文本框。                        </br>
				如果特定列不允许修改，则可以在列上单独定义其readonly属性为true                     </br>
				如果某列需要以下拉框等其他控件的形式展示，则可以在列上使用render函数将其渲染成相应的控件                     </br>				                                                                                                                                                                                                                                                     </br>
		     </div>
	    </div>
	    
		<div class="panel panel-default">
	        <div class="panel-heading">表格过滤</div>
			<div class="panel-body">
		        <div id="filterTable"></div>
		     </div>
		     <div class="panel-footer">
		                          过滤表格简略说明：                                                                                                                                               </br>
			    $('#filterTable').BootstrapTable({                    </br>
					columns: [                                       </br>
						{display : '登录名', name: 'loginName'},        </br>
						{display : '姓名', name: 'userName'},          </br>
						{display : '电话', name: 'userPhone'},          </br>
						{display : '移动电话', name: 'userMPhome'},       </br>
						{display : '电子邮箱', name: 'userEmail'},       </br>
					],                                                 </br>
					data: user,                                        </br>
					filter: true,                                       </br>
					usePager: true                                     </br>
				});	                                                    </br>
				比起简单表格，过滤表格定义了filter属性为true	                        </br>
				控件将过滤方法集成到每列的表头，点击过滤图标可以输入过滤条件                                                            </br>
				注：表头过滤的方法不适用于远程分页加载表格                                                                                                     </br>
		     </div>
	    </div>
	    
		<div class="panel panel-default">
	        <div class="panel-heading">表格汇总</div>
			<div class="panel-body">
		        <div id="summaryTable"></div>
		     </div>
		     <div class="panel-footer">
		                    表格汇总简略说明：                                                                                                                                               </br>
			    $("#summaryTable").BootstrapTable({                                                         </br>
					columns: [                                                                               </br>
						{display : '登录名', name: 'loginName', readonly: true},                             </br>
						{display : '姓名', name: 'userName',summaryType: 'count'},                             </br>
						{display : '电话', name: 'userPhone', type: 'number', summaryType: 'sum'},                                 </br>
						{display : '移动电话', name: 'userMPhome', type: 'number', summaryType: 'avg'},             </br>
						{display : '电子邮箱', name: 'userEmail'},                                                </br>
					],                                                                                          </br>
					data: mydata,                                                                             </br>
					isSummary: true,                                                                           </br>
					usePager: false                                                                            </br>
				});	                                                                                            </br>
				要对表格的列进行自动汇总，需要先定义isSummary属性为true，并且在需要汇总的列上定义summaryType属性	                        </br>
				summaryType属性有sum、avg、count三种                                                                                                                                                                                                                                       </br>
				注：sum和avg只对type为number的列有效，count对type为number和text的列都有效                                                                                                                                </br>
		     </div>
	    </div>	    	    	    
	          
	</div>
</body>

</html>